<template>
  <!-- 悬浮按钮容器 -->
  <view 
    class="float-btn-container"
    :style="{left: position.x + 'px', top: position.y + 'px'}"
    v-if="showFloatBtn"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <!-- 主按钮 -->
    <view class="main-btn" @click="handleCustomerService">
      <!-- <u-icon name="kefu-ermai" size="28" color="#fff"></u-icon> -->
			<image src="@/static/img_kefu.png" style="width: 112rpx; height: 108rpx;"></image>
    </view>
    
    <!-- 关闭按钮 -->
    <view class="close-btn" @click="handleClose">
      <u-icon name="close" size="16" color="#fff"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showFloatBtn: true, // 是否显示悬浮按钮
      position: { x: 20, y: 200 }, // 按钮位置
      windowSize: { width: 375, height: 667 }, // 窗口尺寸
      touchStart: { x: 0, y: 0 }, // 触摸起始位置
      isDragging: false // 是否正在拖动
    }
  },
  mounted() {
    this.initWindowSize()
    this.loadPosition()
  },
  methods: {
    // 初始化窗口尺寸
    initWindowSize() {
      const systemInfo = uni.getSystemInfoSync()
      this.windowSize = {
        width: systemInfo.windowWidth,
        height: systemInfo.windowHeight
      }
    },
    
    // 从本地存储加载位置
    loadPosition() {
      const savedPos = uni.getStorageSync('floatBtnPosition')
      if (savedPos) {
        this.position = savedPos
      } else {
        // 默认位置：右侧中间
        this.position = {
          x: this.windowSize.width - 70,
          y: this.windowSize.height / 2
        }
      }
    },
    
    // 保存位置到本地存储
    savePosition() {
      uni.setStorageSync('floatBtnPosition', this.position)
    },
    
    // 触摸开始
    handleTouchStart(e) {
      this.touchStart = {
        x: e.touches[0].clientX,
        y: e.touches[0].clientY
      }
      this.isDragging = false
    },
    
    // 触摸移动
    handleTouchMove(e) {
      const currentX = e.touches[0].clientX
      const currentY = e.touches[0].clientY
      
      // 计算移动距离
      const deltaX = currentX - this.touchStart.x
      const deltaY = currentY - this.touchStart.y
      
      // 判断是否开始拖动（移动超过5px才认为是拖动）
      if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
        this.isDragging = true
      }
      
      // 更新位置
      let newX = this.position.x + deltaX
      let newY = this.position.y + deltaY
      
      // 边界检查
      newX = Math.max(10, Math.min(newX, this.windowSize.width - 70))
      newY = Math.max(10, Math.min(newY, this.windowSize.height - 70))
      
      // 更新位置
      this.position = { x: newX, y: newY }
      
      // 更新起始位置
      this.touchStart = { x: currentX, y: currentY }
    },
    
    // 触摸结束
    handleTouchEnd() {
      if (this.isDragging) {
        this.savePosition()
      }
      this.isDragging = false
    },
    
    // 处理客服点击
    handleCustomerService() {
      if (this.isDragging) return
      
      // 这里实现客服功能，例如：
      // 1. 跳转客服页面
      uni.navigateTo({ url: '/pages/Institution/mine/makePhoneCall' })
      
      // 2. 拨打电话
      // uni.makePhoneCall({ phoneNumber: '400-123-4567' })
      
      // 3. 打开客服聊天窗口
      // 这里使用uView的弹窗作为示例
      uni.showToast({
        title: '正在联系客服...',
        icon: 'none'
      })
    },
    
    // 关闭悬浮按钮
    handleClose() {
      this.showFloatBtn = false
      uni.showToast({
        title: '已隐藏悬浮按钮',
        icon: 'none'
      })
      // 可以添加逻辑让用户能在设置中重新开启
    }
  }
}
</script>

<style lang="scss" scoped>
.float-btn-container {
  position: fixed;
  width: 60px;
  height: 60px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .main-btn {
    width: 50px;
    height: 50px;
    background-color: #2979ff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(41, 121, 255, 0.3);
    transition: all 0.2s;
    
    &:active {
      transform: scale(0.95);
      opacity: 0.9;
    }
  }
  
  .close-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: #ff4d4f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 6px rgba(255, 77, 79, 0.3);
    z-index: 10000;
  }
}
</style>